<!--KLC基础-->
<template>
  <scroller class="scroller bg1" @viewappear="viewappear">
    
    <div class="row acenter mb40">
      <div @click="zmClick">
        <LImage v-if="zmPath" class="img-sfz" :src="zmPath"></LImage>
        <LImage v-else class="img-sfz" :src="Config.img('sfzzm.png')"></LImage>
      </div>
      <div class="column all">
        <text class="font24 text2 mb12">{{T('证件人像面')}}</text>
        <text class="font20 text3">{{T('保持证件照清晰，')}}</text>
        <text class="font20 text3">{{T('图像不能有反光、模糊等。')}}</text>
      </div>
    </div>

    <div class="row acenter mb40">
      <div @click="fmClick">
        <LImage v-if="fmPath" class="img-sfz" :src="fmPath"></LImage>
        <LImage v-else class="img-sfz" :src="Config.img('sfzfm.png')"></LImage>
      </div>
      <div class="column all">
        <text class="font24 text2 mb12">{{T('证件国徽面')}}</text>
        <text class="font20 text3">{{T('保持证件照清晰，')}}</text>
        <text class="font20 text3">{{T('图像不能有反光、模糊等。')}}</text>
      </div>
    </div>

    <div class="cell bg2">
      <text class="font28 fontz text2 all">{{T('居住国家/地区')}}</text>
      <text class="font30 fontz text1">{{T('中国')}}</text>
      <!-- <LImage class="img-arrow main1" :src="Config.img('2.png')"></LImage> -->
    </div>

    <div class="cell bg2">
      <text class="font28 fontz text2 all">{{T('证件类型')}}</text>
      <text class="font30 fontz text1">{{T('身份证')}}</text>
      <!-- <LImage class="img-arrow main1" :src="Config.img('2.png')"></LImage> -->
    </div>

    <div class="cell bg2">
      <text class="font28 fontz text2 mr20">{{T('真实姓名')}}</text>
      <input class="input font30 text1"
      :placeholder="T('请输入姓名')"
      v-model="zsxm">
    </div>

    <div class="cell bg2">
      <text class="font28 fontz text2 all">{{T('证件号码')}}</text>
      <input class="input font30 text1"
      :placeholder="T('请输入证件号码')"
      v-model="zjhm">
    </div>

    <div class="ok main1" @click="okClick">
      <text class="font32 fontz text1">{{'确认提交'}}</text>
    </div>
  </scroller>
</template>


<script>

import jnavigator from "@/_js/navigator";
import jhttps from "@/_js/https";
import jconfig from "@/_js/config";
import jmodal from "@/_js/modal";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("基础认证"));

export default {
  
  data() {
    return {
      T: T,
      Config: jconfig,

      zmPath:'', //正面本地路径
      zmUrl:'', //正面url

      fmPath:'', //反面本地路径
      fmUrl:'', //反面url

      zsxm:'', //真实姓名
      zjhm:'', //证件号码
    };
  },

  created() {
  },

  methods: {


    /************************************* https */
    //消息详情请
    httpsJuniorCertification(){

      jmodal.showLoad();
      var param = {'frontImage':this.zmUrl,
                   'backImage':this.fmUrl,
                   'realName':this.zsxm,
                   'idNumber':this.zjhm};
      jhttps.post("certification/juniorCertification",param,true,(data)=>{
        jmodal.hideLoad();
        if(data.status == 200){
          jmodal.toast('认证成功');
          jnavigator.back();
        }else{
          jmodal.toast(data.msg);
        }
      });
    },
    
    /************************************* 点击 */
    //正面
    zmClick() {
      
      weexFunction.selectImg((param)=>{
        param = typeof param == "string" ? JSON.parse(param) : param;
        this.zmUrl = param.url;
        this.zmPath = param.path;
      });
    },

    //反面
    fmClick() {
      weexFunction.selectImg((param)=>{
        param = typeof param == "string" ? JSON.parse(param) : param;
        this.fmUrl = param.url;
        this.fmPath = param.path;
      });
    },

    //提交
    okClick() {
      
      if (!this.zmUrl) {
        jmodal.toast(T('请选择证件人像面'));
        return;
      }

      if (!this.fmUrl) {
        jmodal.toast(T('请选择证件人像面'));
        return;
      }

      if (!this.zsxm) {
        jmodal.toast(T('请输入姓名'));
        return;
      }

      if (!this.zjhm) {
        jmodal.toast(T('请输入证件号码'));
        return;
      }

      this.httpsJuniorCertification();
    }
  },
};
</script>


<style src="@/_css/style.css" ></style>
<style scoped>
.scroller {
  flex: 1;
  padding: 40px;
}
.img-sfz {
  width: 320px;
  height: 200px;
  margin-right: 40px;
}
.cell {
  flex-direction: row;
  align-items: center;
  height: 80px;
  border-radius: 10px;
  padding: 0 20px;
  margin-bottom: 20px;
}
.img-arrow {
  width: 17px;
  height: 8px;
  margin-left: 20px;
}
.input {
  flex: 1;
  height: 60px;
  text-align: right;
}
.ok {
  align-items: center;
  justify-content: center;
  height: 80px;
  border-radius: 4px;

  margin-top: 60px;
}
</style>